<template>
    <el-dialog :close-on-click-modal="false"
               :title="!dataForm.transportId ? '新增' : '修改'"
               :visible.sync="visible"
               class="transport-dialog"
               width="1400px"
    >
        <el-form :model="dataForm"
                 @keyup.enter.native="dataFormSubmit()"
                 label-width="80px"
                 ref="dataForm">
            <el-form-item :rules="[
                      { required: true, message: '模板名称不能为空'},
                      { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }
                    ]"
                          label="模板名称"
                          prop="transName">
                <el-input placeholder="模板名称"
                          v-model="dataForm.transName"></el-input>
            </el-form-item>
            <el-form-item label="模板类型"
                          prop="isFreeFee"
                          required="required">
                <template>
                    <el-radio-group @change="changeFreeFee"
                                    v-model="dataForm.isFreeFee">
                        <el-radio :label="0">买家承担运费</el-radio>
                        <el-radio :label="1">卖家包邮</el-radio>
                    </el-radio-group>
                </template>
            </el-form-item>
            <el-form-item label="收费方式"
                          prop="chargeType">
                <template>
                    <el-radio-group :disabled="dataForm.isFreeFee == 1"
                                    v-model="dataForm.chargeType">
                        <el-radio :label="0">按件数</el-radio>
                        <el-radio :label="1">按重量</el-radio>
                        <el-radio :label="2">按体积</el-radio>
                    </el-radio-group>
                </template>
            </el-form-item>
            <el-table :data="dataForm.transfees"
                      border
                      class="table-con"
                      style="width: 100%;"
            >
                <el-table-column align="center"
                                 header-align="center"
                                 label="可配送区域"
                                 width="450">
                    <template slot-scope="scope">
                        <span v-if="scope.$index == 0">所有地区</span>
                        <span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
                        <span v-if="scope.$index > 0">
              <el-tag :key="city.areaId"
                      v-for="city in scope.row.cityList"
              >{{city.areaName}}</el-tag>
            </span>
                        <el-button @click="addOrUpdateHandle(`${scope.$index}`)"
                                   size="small"
                                   type="text"
                                   v-if="isAuth('shop:transfee:update') && scope.$index > 0">编辑
                        </el-button>
                        <el-button @click="deleteHandle(`${scope.$index}`)"
                                   size="small"
                                   type="text"
                                   v-if="isAuth('shop:transfee:delete') && scope.$index > 0">删除
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column :label="tableTitle[0]"
                                 align="center"
                                 header-align="center"
                                 width="180">
                    <template slot-scope="scope">
                        <el-form-item :prop="`transfees.${scope.$index}.firstPiece`"
                                      :rules="[{ required: true, message: `${tableTitle[0]}不能为空`}]"
                                      label-width="0px">
                            <el-input :disabled="!scope.row.status && scope.$index === 0"
                                      @change="checkNumber(scope.row, 1)"
                                      type="number"
                                      v-model="scope.row.firstPiece"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column :label="tableTitle[1]"
                                 align="center"
                                 header-align="center">
                    <template slot-scope="scope">
                        <el-form-item :prop="`transfees.${scope.$index}.firstFee`"
                                      :rules="[{ required: true, message: `${tableTitle[1]}不能为空`}]"
                                      label-width="0px">
                            <el-input :disabled="!scope.row.status && scope.$index === 0"
                                      type="number"
                                      v-model="scope.row.firstFee"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column :label="tableTitle[2]"
                                 align="center"
                                 header-align="center">
                    <template slot-scope="scope">
                        <el-form-item :prop="`transfees.${scope.$index}.continuousPiece`"
                                      :rules="[{ required: true, message: `${tableTitle[2]}不能为空`}]"
                                      label-width="0px">
                            <el-input :disabled="!scope.row.status && scope.$index === 0"
                                      @change="checkNumber(scope.row, 3)"
                                      type="number"
                                      v-model="scope.row.continuousPiece"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column :label="tableTitle[3]"
                                 align="center"
                                 header-align="center">
                    <template slot-scope="scope">
                        <el-form-item :prop="`transfees.${scope.$index}.continuousFee`"
                                      :rules="[{ required: true, message: `${tableTitle[3]}不能为空`}]"
                                      label-width="0px">
                            <el-input :disabled="!scope.row.status && scope.$index === 0"
                                      type="number"
                                      v-model="scope.row.continuousFee"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px"
                 v-if="dataForm.isFreeFee == 0">
                <el-button @click="addTransfee()"
                           icon="el-icon-location-outline"
                           type="primary">点击添加可配送的区域和运费
                </el-button>
            </div>
            <el-checkbox style="margin-top:10px;font-size:50px"
                         v-if="!dataForm.isFreeFee"
                         v-model="dataForm.hasFreeCondition">指定条件包邮
            </el-checkbox>
            <el-table :data="dataForm.transfeeFrees"
                      border
                      style="width: 100%;"
                      v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee">
                <el-table-column align="center"
                                 header-align="center"
                                 label="指定区域"
                                 width="350">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
                        <el-tag :key="city.areaId"
                                v-for="city in scope.row.freeCityList">{{city.areaName}}
                        </el-tag>
                        <el-button @click="addOrUpdateTransfeeFree(`${scope.$index}`)"
                                   size="small"
                                   type="text"
                                   v-if="isAuth('shop:transfee:update')">编辑
                        </el-button>
                        <el-button @click="deleteTransfeeFree(`${scope.$index}`)"
                                   size="small"
                                   type="text"
                                   v-if="isAuth('shop:transfee:delete')">删除
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                 header-align="center"
                                 label="设置包邮条件"
                                 width="600">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.freeType">
                            <el-radio :label="0">满件/重量/体积包邮</el-radio>
                            <el-radio :label="1">满金额包邮</el-radio>
                            <el-radio :label="2">满件/重量/体积且满金额包邮</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column align="left"
                                 header-align="center">
                    <template slot-scope="scope">
                        <el-form-item :prop="`transfeeFrees.${scope.$index}.amount`"
                                      :rules="[{ required: true, message: `不能为空`}]"
                                      label-width="0px"
                                      v-if="scope.row.freeType == 1 || scope.row.freeType == 2">
                            满
                            <el-input style="width:100px"
                                      v-model="scope.row.amount"></el-input>
                            元包邮
                        </el-form-item>
                        <el-form-item :prop="`transfeeFrees.${scope.$index}.piece`"
                                      :rules="[{ required: true, message: `不能为空`}]"
                                      label-width="0px"
                                      v-if="scope.row.freeType == 0 || scope.row.freeType == 2">
                            满
                            <el-input style="width:100px"
                                      v-model="scope.row.piece"></el-input>
                            件/重量/体积包邮
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px"
                 v-if="dataForm.isFreeFee == 0">
                <el-button @click="addTransfeeFree()"
                           icon="el-icon-location-outline"
                           type="primary">点击添加指定包邮条件
                </el-button>
            </div>
        </el-form>
        <span class="dialog-footer"
              slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button @click="dataFormSubmit()"
                 type="primary">确定</el-button>
    </span>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="getDataList"
                       ref="addOrUpdate"
                       v-if="addOrUpdateVisible"></add-or-update>
    </el-dialog>
</template>

<script>
    import {Debounce} from '@/utils/debounce'
    import AddOrUpdate from './transcity-add-or-update'

    export default {
        data() {
            return {
                hasFreeCondition: 0,
                visible: false,
                addOrUpdateVisible: false,
                dataForm: {
                    hasFreeCondition: false,
                    transName: '',
                    createTime: '',
                    chargeType: 0,
                    transportId: 0,
                    isFreeFee: 0,
                    transfees: [{cityList: [], status: 1}],
                    transfeeFrees: [{freeCityList: [], freeType: 0}]
                },
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                editVisible: false
            }
        },
        components: {
            AddOrUpdate
        },
        watch: {
            // 如果当前对话框不可见，则关闭选择城市的对话框
            visible: function (val) {
                if (!val) {
                    this.addOrUpdateVisible = false
                }
            }
        },
        computed: {
            tableTitle() {
                var titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
                if (this.dataForm.chargeType) {
                    return titles[this.dataForm.chargeType]
                }
                return titles[0]
            }
        },
        methods: {
            init(id) {
                this.visible = true
                this.dataForm.transportId = id || 0
                this.$nextTick(() => {
                    this.$refs.dataForm.resetFields()
                    this.dataForm = {
                        hasFreeCondition: false,
                        transName: '',
                        createTime: '',
                        chargeType: 0,
                        transportId: 0,
                        isFreeFee: 0,
                        transfees: [{cityList: [], status: 1}],
                        transfeeFrees: [{freeCityList: [], freeType: 0}]
                    }
                })
                if (this.dataForm.transportId) {
                    this.$http({
                        // 获取运费模板数据
                        url: this.$http.adornUrl(`/shop/transport/info/${this.dataForm.transportId}`),
                        method: 'get'
                    }).then(({data}) => {
                        if (data.isFreeFee) {
                            data.transfees[0].status = 0
                        } else {
                            data.transfees[0].status = 1
                        }
                        this.dataForm = data
                        this.dataForm.hasFreeCondition = !!data.hasFreeCondition
                    })
                }
            },
            getDataList(row, cityList, type) {
                if (type === 0) {
                    this.$set(this.dataForm.transfees[row], 'cityList', cityList)
                }
                if (type === 1) {
                    this.$set(this.dataForm.transfeeFrees[row], 'freeCityList', cityList)
                }
            },
            // 添加运费项
            addTransfee() {
                this.editVisible = true
                this.dataForm.transfees.push({cityList: [], status: 1})
            },
            // 删除运费项
            deleteHandle(rowIndex) {
                this.dataForm.transfees.splice(rowIndex, 1)
            },
            // 可配送区域和运费编辑
            addOrUpdateHandle(rowIndex) {
                this.addOrUpdateVisible = true
                let allSelectCityList = []
                for (let i = 1; i < this.dataForm.transfees.length; i++) {
                    const cityList = this.dataForm.transfees[i].cityList
                    allSelectCityList = allSelectCityList.concat(cityList)
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(rowIndex, this.dataForm.transfees[rowIndex].cityList || [], allSelectCityList, 0)
                })
            },
            // 添加指定包邮条件
            addTransfeeFree() {
                if (this.dataForm.hasFreeCondition) {
                    this.dataForm.transfeeFrees.push({freeCityList: [], freeType: 0})
                }
            },
            // 删除指定包邮条件
            deleteTransfeeFree(rowIndex) {
                this.dataForm.transfeeFrees.splice(rowIndex, 1)
            },
            // 指定包邮条件编辑
            addOrUpdateTransfeeFree(rowIndex) {
                this.addOrUpdateVisible = true
                let allSelectCityList = []
                for (let i = 1; i < this.dataForm.transfeeFrees.length; i++) {
                    const freeCityList = this.dataForm.transfeeFrees[i].freeCityList
                    allSelectCityList = allSelectCityList.concat(freeCityList)
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(rowIndex, this.dataForm.transfeeFrees[rowIndex].freeCityList || [], allSelectCityList, 1)
                })
            },
            // 改变模板类型， 0 买家承担运费 1 卖家包邮
            changeFreeFee(val) {
                this.dataForm.hasFreeCondition = false
                if (val) {
                    this.dataForm.chargeType = 0
                    this.dataForm.transfees = [{
                        cityList: [],
                        status: 0,
                        firstPiece: 1,
                        firstFee: 0,
                        continuousPiece: 1,
                        continuousFee: 0
                    }]
                } else {
                    this.dataForm.transfees = [{cityList: [], status: 1}]
                }
            },
            /**
             * 校验输入的数字
             */
            checkNumber(row, type) {
                if (type === 1) {
                    row.firstPiece = this.getNumber(row.firstPiece)
                    row.firstPiece = row.firstPiece === 0 ? 1 : row.firstPiece
                } else if (type === 3) {
                    row.continuousPiece = this.getNumber(row.continuousPiece)
                    row.continuousPiece = row.continuousPiece === 0 ? 1 : row.continuousPiece
                }
            },
            /**
             * 保留整数并小于零的数设为0
             */
            getNumber(num) {
                num = Math.round(num)
                return num < 0 ? 0 : num
            },
            // 表单提交
            dataFormSubmit: Debounce(function () {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        for (let i = 1; i < this.dataForm.transfees.length; i++) {
                            const transfee = this.dataForm.transfees[i]
                            if (transfee.cityList.length === 0) {
                                this.$message({
                                    message: '请选择可配送区域',
                                    type: 'error',
                                    duration: 1500
                                })
                                return
                            }
                        }
                        if (this.dataForm.hasFreeCondition) {
                            this.hasFreeCondition = 1
                        } else {
                            this.hasFreeCondition = 0
                        }
                        this.dataForm.transfees[0].cityList = []
                        this.$http({
                            url: this.$http.adornUrl(`/shop/transport`),
                            method: this.dataForm.transportId ? 'put' : 'post',
                            data: this.$http.adornData({
                                'transportId': this.dataForm.transportId || undefined,
                                'transName': this.dataForm.transName,
                                'chargeType': this.dataForm.chargeType,
                                'isFreeFee': this.dataForm.isFreeFee,
                                'transfees': this.dataForm.transfees,
                                'transfeeFrees': this.dataForm.transfeeFrees,
                                'hasFreeCondition': this.hasFreeCondition
                            })
                        }).then(({data}) => {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false
                                    this.$emit('refreshDataList', this.page)
                                }
                            })
                        })
                    }
                })
            })
        }
    }
</script>

<style scoped>
    .transport-dialog .table-con .el-form-item {
        margin-top: 16px;
        margin-bottom: 16px !important;
    }
</style>
